import React from 'react';

const categories = [
  { id: 'marketing', name: '营销文案' },
  { id: 'social', name: '社交媒体' },
  { id: 'slogan', name: '广告语' },
  { id: 'content', name: '内容创作' },
  { id: 'other', name: '其他' },
];

interface CategorySelectProps {
  value: string;
  onChange: (value: string) => void;
  className?: string;
}

const CategorySelect: React.FC<CategorySelectProps> = ({
  value,
  onChange,
  className = '',
}) => {
  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      className={`block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${className}`}
    >
      <option value="">选择分类</option>
      {categories.map((category) => (
        <option key={category.id} value={category.id}>
          {category.name}
        </option>
      ))}
    </select>
  );
};

export default CategorySelect;
